<template>
  <div class="app-container">
  <center>
      <el-form>
        <el-form-item>
          <el-input v-model="search" placeholder="请输入搜索项目内容" style='width: 50%;'></el-input>
          <el-button type="primary" icon="el-icon-search" circle style='margin-left:10px;' @click="lists()"></el-button>
        </el-form-item>
      </el-form>
    </center>
    <el-table :data="lists" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"> </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作类型" prop="opTypeName" style="width: 60px;"></el-table-column>
      <el-table-column align="center" label="操作表" prop="opList" style="width: 60px;"></el-table-column>
      <el-table-column align="center" label="操作用户名" prop="username" style="width: 60px;"></el-table-column>
      <el-table-column align="center" label="操作角色" width="100">
        <template slot-scope="scope">
          <el-tag type="success" v-text="scope.row.roleName" v-if="scope.row.roleId===1"></el-tag>
          <el-tag type="primary" v-text="scope.row.roleName" v-else></el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作时间" prop="opDate" width="170"></el-table-column>
      <el-table-column align="center" label="设备/项目名" prop="opObject" width="170"></el-table-column>
      <el-table-column align="center" label="管理" width="220" v-if="hasPerm('user:update')">
        <template slot-scope="scope">
          <el-button type="primary" icon="edit" @click="showUpdate(scope.$index)">查看</el-button>
          <el-button type="danger" icon="delete" v-if="scope.row.userId!=userId "
                    @click="removeLog(scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum"
      :page-size="listQuery.pageRow"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form class="small-space" :model="tempLog" label-position="left" label-width="80px"
              style='width: 300px; margin-left:50px;'>
        <el-form-item label="操作表" >
          <el-input type="text" v-model="tempLog.opList">
          </el-input>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-input type="text" v-model="tempLog.opTypeName">
          </el-input>
        </el-form-item>
        <el-form-item label="操作用户" width="60">
          <el-input type="text" v-model="tempLog.username">
          </el-input>
        </el-form-item>
        <el-form-item label="操作角色">
          <el-input type="text" v-model="tempLog.roleName">
          </el-input>
        </el-form-item>
        <el-form-item label="操作时间">
          <el-input type="text" v-model="tempLog.opDate">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  
  export default {
    data() {
      return {
        search: '',
        totalCount: 0, //分页组件--数据总条数
        list: [],//表格的数据
        listLoading: false,//数据加载等待动画
        listQuery: {
          pageNum: 1,//页码
          pageRow: 50,//每页条数
        },
        dialogStatus: 'update',
        dialogFormVisible: false,
        textMap: {
          update: '编辑'
        },
        tempLog: {
          opList: '',
          opTypeName: '',
          username: '',
          opDate: '',
          opObject: '',
          roleName: '',
          logId: '',
        },
        tableDataName: '',
      }
    },
    created() {
      this.getList();  
    },
    computed: {
      ...mapGetters([
        'userId'
      ]),
      // 模糊搜索
      lists () {
        const search = this.search
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          return this.list.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.list
      }
    },
    methods: {
      getList() {
        //查询列表
        this.listLoading = true;
        this.api({
          url: "/log/getLog",
          method: "get",
          params: this.listQuery
        }).then(data => {
          this.listLoading = false;
          this.list = data.list;
          this.totalCount = data.totalCount;
        })
      },
      handleSizeChange(val) {
        //改变每页数量
        this.listQuery.pageRow = val
        this.handleFilter();
      },
      handleCurrentChange(val) {
        //改变页码
        this.listQuery.pageNum = val
        this.getList();
      },
      handleFilter() {
        //查询事件
        this.listQuery.pageNum = 1
        this.getList()
      },
      getIndex($index) {
        //表格序号
        return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
      },
      showUpdate($index) {
        let log = this.list[$index];
        this.tempLog.opList = log.opList;
        this.tempLog.opTypeName = log.opTypeName;
        this.tempLog.opDate = log.opDate;
        this.tempLog.username = log.username;
        this.tempLog.opObject = log.opObject;
        this.tempLog.roleName = log.roleName;
        this.tempLog.deleteStatus = '1';
        this.dialogStatus = "update"
        this.dialogFormVisible = true
      },
      removeLog($index) {
        let _vue = this;
        this.$confirm('确定删除此日志?', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
          let log = _vue.list[$index];
          log.deleteStatus = '2';
          _vue.api({
            url: "/log/updateLog",
            method: "post",
            data: log
          }).then(() => {
            _vue.getList()
          }).catch(() => {
            _vue.$message.error("删除失败")
          })
        })
      },
      remoteMethod(query) {
        if (query !== '') {
          this.listLoading = true;
          setTimeout(() => {
            this.listLoading = false;
            this.list = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.list = [];
        }
      },
      doFilter() {
        if (this.tableDataName == "") {
        this.$message.warning("查询条件不能为空！");
        return;
        }
        this.tableDataEnd = []
        //每次手动将数据置空,因为会出现多次点击搜索情况
        this.filterTableDataEnd=[]
        this.tableDataBegin.forEach((value, index) => {
        if(value.name){
        if(value.name.indexOf(this.tableDataName)>=0){
        this.filterTableDataEnd.push(value)
        }
        }
        });
        //页面数据改变重新统计数据数量和当前页
        this.currentPage=1
        this.totalItems=this.filterTableDataEnd.length
        //渲染表格,根据值
        this.currentChangePage(this.filterTableDataEnd)
        //页面初始化数据需要判断是否检索过
        this.flag=true
      },
      openData() {},
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.handleCurrentChange(this.currentPage);
    },
    }
  }
</script>
